<template>
    <el-container>
        <div class="menu-btn iconfont" :class="isShowMenu === 'true' ? 'icon-caidan-shousuo' : 'icon-caidan-dakai'" @click="hideMenu()"></div>
        <el-aside >
            <el-menu :default-active="defaultActive" style="min-height: 100%;" background-color="#1d2b36" text-color="#fff" active-text-color="#3890df" router :collapse="isShowMenu === 'false'">
                <div class="logo" :class="isShowMenu === 'true' ? 'logo' : 'smallLogo'"></div>
                <el-submenu index="1">
                    <template slot="title"><i class="menu-icon iconfont icon-liebiao"></i>{{$t('message.myApplication')}}</template>
                    <el-menu-item index="applicationManage">{{$t('message.applicationList')}}</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="menu-icon iconfont icon-shezhi-kong"></i>{{$t('message.sysManage')}}</template>
                    <el-menu-item index="businessManage">{{$t('message.businessManage')}}</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
    </el-container>
</template>

<script>
    // import { getPageByUser } from '../api/getData';
    import { getStore, setStore } from '../config/mUtils';
    export default {
        data() {
            return {
                menuList: [],
                defaultActive:"/",
                isShowMenu:'true',
                isCollapse:false
            }
        },
        computed: {},
        created() {
            /*this.getLanguageResource();*/
            this.getMenu();
            if (getStore('isShowMenu') && getStore('isShowMenu') != null && getStore('isShowMenu') != "") {
                this.isShowMenu = getStore('isShowMenu')
            } else {
                this.isShowMenu = 'true'
            }
        },
        methods: {
            getMenu() {
                /*const crs = await getPageByUser({
                    userId:getStore('Id')
                });
                if (crs.Flag) {
                    crs.Result.pageList.forEach((item,index) => {
                        if(item.ParentPageId==0){
                            this.menuList.push(item);
                        }
                    });
                    let submenuList=[];
                    this.menuList.forEach((k,key)=>{
                        let submenu=[];
                        crs.Result.pageList.forEach((item,index) => {
                            if(item.ParentPageId==k.Id){
                                submenu.push(item);
                                submenuList.push(item);
                            }
                        });
                        k.submenu=submenu;
                    });
                    let buttonPermission = [];
                    console.log(submenuList);
                    submenuList.forEach(item=>{
                        let permissionObj = {
                            parentPageUrl:item.PageUrl,
                            Permission:[]
                        }
                        crs.Result.pageList.forEach(j => {
                            if (j.ParentPageId==item.Id) {
                               permissionObj.Permission.push(j);
                            }
                        });
                        if(permissionObj.Permission.length>0){
                            buttonPermission.push(permissionObj);
                        }
                    });
                    setStore('Permission',buttonPermission);
                    console.log(this.menuList);
                    this.getLanguageResource();
                    this.$router.push(this.menuList[0].submenu[0].PageUrl);
                    this.defaultActive = this.menuList[0].submenu[0].PageUrl
                }*/
                this.$router.push('applicationManage');
                this.defaultActive = 'applicationManage';
            },
            hideMenu() {
                // this.isCollapse=!this.isCollapse
                if (this.isShowMenu === 'true') {
                    this.isShowMenu = 'false';
                    this.isCollapse = true;
                } else {
                    this.isShowMenu = 'true';
                    this.isCollapse = false;
                }
                setStore('isShowMenu', this.isShowMenu);
                if (this.isShowMenu === 'true') {
                    // document.getElementsByClassName('kpi-container')[0].style.marginLeft = '200px';
                    setTimeout(function ()  {
                    document.getElementsByClassName('breadcrumb')[0].style.left = '200px';
                    document.getElementsByClassName('menu-btn')[0].style.left = '225px';
                    document.getElementsByClassName('el-main')[0].style.marginLeft = '200px';
                    document.getElementsByClassName('top-head')[0].style.marginLeft = '200px';
                    document.getElementsByClassName('el-dropdown')[0].style.marginRight = '220px';
                    document.getElementsByClassName('el-aside')[0].style.maxWidth = '200px';
                    // document.getElementsByClassName('logo')[0].style.backgroundPositionX = 'center'
                    }, 280);
                } else {
                    // document.getElementsByClassName('kpi-container')[0].style.marginLeft = '0'
                    // document.getElementsByClassName('logo')[0].style.backgroundPositionX = 'left'
                    document.getElementsByClassName('breadcrumb')[0].style.left = '44px';
                    document.getElementsByClassName('menu-btn')[0].style.left = '60px';
                    document.getElementsByClassName('el-main')[0].style.marginLeft = '44px';
                    document.getElementsByClassName('top-head')[0].style.marginLeft = '44px';
                    document.getElementsByClassName('el-dropdown')[0].style.marginRight = '20px';
                    document.getElementsByClassName('el-aside')[0].style.maxWidth = '44px';
                }
            }
        }
    }

</script>
